<template>
    <el-button type="primary" size="default" icon="Plus" @click="addPermisstion(null,'F')">添加顶级目录</el-button>
    <el-table :data="PermisstionArr" style="width: 100%; margin-bottom: 20px" row-key="uuid"
              :tree-props="{ children: 'childMenuVOList', hasChildren: 'hasChildren' }">
        <el-table-column label="名称" prop="menuName"></el-table-column>
        <el-table-column label="权限标识" prop="perms"></el-table-column>
        <el-table-column label="操作">
            <!-- row:即为已有的菜单对象|按钮的对象的数据 -->
            <template #="{ row, $index }">
                <el-button type="primary" @click="addPermisstion(row,null)" size="small"
                           :disabled="row.menuType == 'B' ? true : false">
                    {{ row.menuType == 'M' ? '添加按钮' : '添加菜单' }}
                </el-button>
                <el-button type="primary" @click="updatePermisstion(row)" size="small">编辑</el-button>
                <el-popconfirm :title="`你确定要删除${row.menuName}?`" width="260px" @confirm="removeMenu(row.uuid)">
                    <template #reference>
                        <el-button type="primary" size="small" :disabled="row.isEnd == 0">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!-- 对话框组件:添加或者更新已有的菜单的数据结构 -->
    <el-dialog v-model="dialogVisible" :title="menuAddOrUpdateForm.uuid ? '更新' : '添加'">
        <!-- 表单组件:收集新增与已有的菜单的数据 -->
        <el-form label-width="120px">
            <el-form-item label="重定向" v-if="menuAddOrUpdateForm.menuType==='F' ">
                <el-input placeholder="请你输入顶级目录重定向菜单" v-model="menuAddOrUpdateForm.redirect"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input placeholder="请你输入名称" v-model="menuAddOrUpdateForm.menuName"></el-input>
            </el-form-item>
            <el-form-item label="权限标识">
                <el-input placeholder="请你输入权限值" v-model="menuAddOrUpdateForm.perms"></el-input>
            </el-form-item>
            <el-form-item label="显示顺序">
                <el-input placeholder="请你输入权限值" v-model="menuAddOrUpdateForm.orderNum"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input placeholder="请你输入备注" v-model="menuAddOrUpdateForm.remark"></el-input>
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
    import {onMounted, reactive, ref} from "vue";
    //引入获取菜单请求API
    //引入ts类型
    import type {Permisstion} from '@/api/acl/menu/type';
    import {ElMessage} from "element-plus";
    import {MenuAddOrUpdateForm, MenuAllListResponseData, MenuInfo, MenuList} from "@/api/business/menu/type";
    import {reqAddOrUpdateMenu, reqAllMenu, reqDelMenu} from "@/api/business/menu";
    import {HandleResponseData, UuidForm} from "@/api/common/type";
    //存储菜单的数据
    let PermisstionArr = ref<MenuList>([]);
    //控制对话框的显示与隐藏
    let dialogVisible = ref<boolean>(false);
    //携带的参数
    let menuAddOrUpdateForm = reactive<MenuAddOrUpdateForm>({
        "menuType": '',
        "uuid": '',
        "redirect": '',
        "menuName": "",
        "parentUuid": '',
        "orderNum": '',
        "perms": '',
        "remark": ''
    });

    let uuidForm = reactive<UuidForm>({
        "uuid": ''
    });
    //组件挂载完毕
    onMounted(() => {
        getHasPermisstion();
    });
    //获取菜单数据的方法
    const getHasPermisstion = async () => {
        let result: MenuAllListResponseData = await reqAllMenu();
        if (result.code == '200') {
            PermisstionArr.value = result.result;
        }else {
            ElMessage({type: 'error', message: '获取失败'});

        }
    }

    //添加菜单按钮的回调
    const addPermisstion = (row?: MenuInfo, menuType: string) => {
        //清空数据
        Object.assign(menuAddOrUpdateForm, {
            uuid: "",
            "menuName": "",
            "parentUuid": "",
            "orderNum": "",
            "perms": "",
            "remark": "",
            menuType: ""
        })
        //对话框显示出来
        dialogVisible.value = true;
        //给谁新增子菜单
        if (row) {
            menuAddOrUpdateForm.parentUuid = row.uuid;
        }else {
            menuAddOrUpdateForm.parentUuid = "0"
        }
        if (menuType)
        menuAddOrUpdateForm.menuType = menuType;

    }
    //编辑已有的菜单
    const updatePermisstion = (row: MenuInfo) => {
        dialogVisible.value = true;
        //点击修改按钮:收集已有的菜单的数据进行更新
        Object.assign(menuAddOrUpdateForm, row);
    }

    //确定按钮的回调
    const save = async () => {
        //发请求:新增子菜单|更新某一个已有的菜单的数据
        let result: HandleResponseData = await reqAddOrUpdateMenu(menuAddOrUpdateForm);
        if (result.code == '200') {
            //提示信息
            ElMessage({type: 'success', message: menuAddOrUpdateForm.uuid ? '更新成功' : '添加成功'})
        }else {
            ElMessage({type: 'error', message: menuAddOrUpdateForm.uuid ? '更新失败'+result.msg : '添加失败'+result.msg})

        }
            //对话框隐藏
            dialogVisible.value = false;
            //再次获取全部最新的菜单的数据
            getHasPermisstion();

    }

    //删除按钮回调
    const removeMenu = async (uuid: string) => {
        uuidForm.uuid = uuid;
        let result = await reqDelMenu(uuidForm);
        if (result.code == '200') {
            ElMessage({type: 'success', message: '删除成功'});
        }else {
            ElMessage({type: 'error', message: '删除失败'+result.msg});
        }
        getHasPermisstion();
    }


</script>

<style scoped></style>
